<template>
  <div class="card">
    <button @click="isShow = true">显示弹框</button>
    <Teleport to="#app">
      <div class="dlg" v-if="isShow">
        <div>我就是一个弹框</div>
        <button @click="isShow = false">隐藏弹框</button>
      </div>
    </Teleport>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

let isShow = ref(false)

</script>

<style lang="scss" scoped>
.card {
  width: 500px;
  height: 200px;
  background: skyblue;
  border: 2px solid #ededed;
  filter: saturate(0%);  //滤镜，饱和度为0
}

.dlg {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 150px;
  height: 75px;
  background: olivedrab;
}
</style>